<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyStore后台，欢迎您，管理员</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="css/manage_style.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <style>
        .container-fluid, .container {
            width: 100%;
        }

        /* 左侧导航区域样式 */
        .nav-side-menu {
            overflow: auto;
        }

        .nav-side-menu .brand {
            background-color: #ff7f00;
            line-height: 70px;
            display: inline-block;
            font-size: 24px;
            padding-left: 15px;
            padding-right: 30px;
            color: #fff;
        }

        .nav-side-menu .brand i {
            margin-right: 10px;
            font-size: 36px;
            top: 8px;
            position: absolute;
        }

        .nav-side-menu ul,
        .nav-side-menu li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav-side-menu ul :not(collapsed) .arrow:before,
        .nav-side-menu li:not(collapsed) .arrow:before {
            font-family: "FontAwesome";
            content: "\f078";
            display: inline-block;
            margin-right: 10px;
            margin-top: 5px;
            float: right;
        }

        .nav-side-menu ul .active,
        .nav-side-menu li .active {
            border-left: 3px solid #d19b3d;
            background-color: #2a3b46;
        }

        .nav-side-menu ul .sub-menu li.active,
        .nav-side-menu li .sub-menu li.active {
            color: #fff;
        }

        /* 内容区域样式 */
        .content {
            border: 1px solid #d9d9d9;
            background: #f4f4f4;
            height: 100vh;
            padding: 20px;
        }

        .content-title {
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .content-text {
            font-size: 18px;
        }
        .table {
            table-layout: fixed;
        }

        .table th,
        .table td {
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #pagination {
            position: fixed;
            bottom: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            /* 其他样式属性 */
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <!-- 左侧侧边栏 -->
        <div class="col-md-1 bg-dark">
            <div class="py-3">
                <h3 class="text-white text-center mb-4">MyStore</h3>
                <ul class="list-unstyled">
                    <li>
                        <a th:href="@{/manage/user/page.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fas fa-user mr-2"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/role/page.do}" class="text-white d-flex align-items-center p-3"
                           aria-disabled="false">
                            <i class="fas fa-users-cog mr-2"></i>
                            <span>角色管理</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/uri/page.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fas fa-lock mr-2"></i>
                            <span>Uri管理</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/app/page.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fab fa-shopify mr-2"></i>
                            <span>应用管理</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/app/onlinePage.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fas fa-arrow-circle-up mr-2"></i>
                            <span>应用上架</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/app/offlinePage.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fas fa-arrow-circle-down mr-2"></i>
                            <span>应用下架</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/manage/app/updateAppVersion.do}" class="text-white d-flex align-items-center p-3">
                            <i class="fas fa-cloud-upload-alt mr-2"></i>
                            <span>更新应用</span>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="col-md-11 content">
            <div class="content-title">角色管理</div>

            <div class="search-form">
                <form th:action="@{/manage/role/page.do}" method="get" class="text-right">
                    <div class="form-row align-items-center">
                        <div class="col-md-6 mb-3">
                            <input type="text" name="data" class="form-control" th:value="${data}" id="searchInput" placeholder="请输入">
                        </div>
                        <div class="col-md-4 mb-3">
                            <button type="submit" class="btn btn-primary">查询</button>
                        </div>
                        <div class="col-md-2 mb-3 text-right">
                            <a class="btn btn-success" th:href="@{/manage/role/insert.do}" role="button">添加角色</a>
                        </div>
                    </div>
                </form>
            </div>


            <div class="user-list">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">角色ID</th>
                        <th scope="col">角色名</th>
                        <th scope="col">权限</th>
                        <th scope="col">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="role:${roles.getRecords()}">
                        <td th:text="${role.roleId}"></td>
                        <td th:text="${role.roleName}"></td>
                        <td>
                            <button class="btn btn-primary" th:onclick="'getPermissions('+${role.roleId}+')'">查看权限</button>
                        </td>
                        <td>
                            <a class="btn btn-primary" th:href="@{/manage/role/update.do(roleId=${role.roleId})}" role="button">编辑</a>
                            <a class="btn btn-danger" th:href="@{/manage/role/delete.do(roleId=${role.roleId})}" role="button">删除</a>
                        </td>
                    </tr>
                    <!-- 其他用户列表项 -->
                    </tbody>
                </table>
            </div>

            <div id="pagination" class="d-flex justify-content-center">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li th:class="${roles.current == 1} ? 'page-item disabled' : 'page-item'" >
                            <a class="page-link" th:href="@{/manage/role/page.do(data=${data},current=1)}"  tabindex="-1" aria-disabled="true">首页</a>
                        </li>
                        <li th:class="${roles.start == 1} ? 'page-item disabled' : 'page-item'" >
                            <a class="page-link" th:href="@{/manage/role/page.do(data=${data},current=${roles.current+-1})}"  tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page" th:each="pageNumber : ${#numbers.sequence(roles.start, roles.end)}">
                            <a th:href="@{/manage/role/page.do(data=${data},current=${pageNumber})}" th:class="${pageNumber == roles.current} ?'page-link active': 'page-link'" th:text="${pageNumber}">1</a>
                        </li>
                        <li th:class="${(roles.current == roles.getPages())} ? 'page-item disabled' : 'page-item'" >
                            <a class="page-link" th:href="@{/manage/role/page.do(data=${data},current=${roles.next})}">下一页</a>
                        </li>
                        <li th:class="${roles.current == roles.getPages()} ? 'page-item disabled' : 'page-item'" >
                            <a class="page-link" th:href="@{/manage/role/page.do(data=${data},current=${roles.getPages()})}">末页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>
<div class="modal" id="permissions-modal" tabindex="-1" role="dialog" aria-labelledby="permissions-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="permissions-modal-label">权限列表</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="permissions-modal-body">
                <!-- 此处将展示权限列表 -->
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    // 在这里编写JavaScript代码
    var message = [[${result}]];
    if (message!==undefined&&message!==null&&message!=='')
        alert(message==='true'?'操作成功':'操作失败');
</script>
<!-- 引入 jQuery 和 Bootstrap JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
    function getPermissions(roleId) {
        var url = "/manage/role/selectUris.do?roleId=" + roleId;
        // 发送Ajax请求
        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response.status === "ok") {
                    // 获取权限列表成功，展示权限列表
                    var permissions = response.result;
                    var permissionsHtml = "";
                    if(permissions===null||permissions===undefined){
                        $('#permissions-modal-body').html("<ul>无权限</ul>");
                        $('#permissions-modal').modal('show');
                    }
                    for (var i = 0; i < permissions.length; i++) {
                        permissionsHtml += "<li>" + permissions[i]['uriLocation'] + "</li>";
                    }
                    // 使用弹窗展示权限列表
                    $('#permissions-modal-body').html("<ul>" + permissionsHtml + "</ul>");
                    $('#permissions-modal').modal('show');
                } else {
                    ('#permissions-modal-body').html("<ul>权限列表获取失败</ul>");
                    $('#permissions-modal').modal('show');
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                ('#permissions-modal-body').html("<ul>权限列表获取失败</ul>");
                $('#permissions-modal').modal('show');
            }
        });
    }
</script>

</body>

</html>
